<template>
  <div>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="total"
      layout="slot, prev, pager, next, sizes, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <template slot>
        <span class="el-pagination__total">{{ `总共${total}条 显示${startRow}-${endRow}条` }}</span>
      </template>
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    //   页码
    currentPage: {
      type: Number,
      default: function() {
        return 1
      },
      //   页面显示条数种类
      pageSizes: {
        type: Array,
        default: function() {
          return [15, 30, 50, 100]
        }
      },
      //   显示条数
      pageSize: {
        type: Number,
        default: function() {
          return 15
        }
      },
      //   总数
      total: {
        type: Number,
        default: function() {
          return 0
        }
      },
      //   开始条数
      startRow: {
        type: Number,
        default: function() {
          return 0
        }
      },
      //   结束条数
      endRow: {
        type: Number,
        default: function() {
          return 0
        }
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    //   切换页面显示条数
    handleSizeChange(val) {
      console.log(val)
    },
    // 切换页码
    handleCurrentChange(val) {
      console.log(val)
    }
  }
}
</script>

<style>

</style>
